<template>
    <div>
        <el-dialog
            :title="isListed?this.$t('ShelfManagementLang.goods_listed'):this.$t('ShelfManagementLang.goods_pickup')"
            :visible.sync="Visible"
            width="1000px"
            :close-on-click-modal="false"
            @close="cancel"
        >
            <div class="midContant clearfix">
                <div style="display: flex; height: 330px;gap:10px;">
                    <div style="position: relative;width:400px;">
                        <div style="height:100%;display: flex;flex-direction: column;justify-content: space-between;" class="dialogBox top">
                            <div style="flex-direction: column;" class="dialogBoxItem">
                                <div v-if="isListed" class="dialogBoxItemRow">
                                    <div class="title">
                                        <div class="RequiredRowTip">*</div>
                                        {{ $t('ShelfManagementLang.shelf_num') }}:
                                    </div>
                                    <div class="contant">
                                        <el-select
                                            ref="shelves_id"
                                            filterable
                                            @blur="handleBlur('shelves_id', $event)"
                                            @change="handleChang('shelves_id')"
                                            v-model="data.shelves_id"
                                            :placeholder="$t('common.select_plactholder')"
                                        >
                                            <el-option
                                                v-for="item in options_shelf"
                                                :key="item.id"
                                                :label="item.shelves_number_name"
                                                :value="item.id"
                                            >
                                            </el-option>
                                        </el-select>
                                    </div>
                                </div>
                                <div class="dialogBoxItemRow">
                                    <div class="title">
                                        <div class="RequiredRowTip">*</div>
                                        {{ $t('ShelfManagementLang.tracking_number') }}:
                                    </div>
                                    <div class="contant">
                                        <el-input
                                            ref="express_sn"
                                            @blur="handleBlur('express_sn',$event)"
                                            @focus="handleFocus($event)"
                                            :placeholder="$t('common.input_plactholder')"
                                            v-model="data.express_sn"
                                            @keyup.enter.native="search"
                                        ></el-input>
                                    </div>
                                </div>
                            </div>
                            <div style="width:100%;display: flex;justify-content: space-evenly;margin-bottom:5px;">
                                <el-button  @click="search" size="small">{{$t('FilterBoxLang.search')}}</el-button>
                                <el-button type="primary" @click="confirm" size="small">{{$t('common.confirm')}}</el-button>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div style="height:100%;" class="dialogBox top">
                            <div class="dialogBoxItem">
                                <div class="dialogBoxItemRow">
                                    <div class="title">
                                        {{ $t('ShelfManagementLang.tracking_number') }}:
                                    </div>
                                    <div class="contant">
                                        <el-input
                                            disabled
                                            v-model="dataRight.express_sn"
                                        ></el-input>
                                    </div>
                                </div>
                                <div class="dialogBoxItemRow">
                                    <div class="title">
                                        {{ $t('ShelfManagementLang.package_number') }}:
                                    </div>
                                    <div class="contant">
                                        <el-input
                                            disabled
                                            v-model="dataRight.package_sn"
                                        ></el-input>
                                    </div>
                                </div>
                            </div>
                            <div class="dialogBoxItem">
                                <div class="dialogBoxItemRow">
                                    <div class="title">
                                        {{ $t('ShelfManagementLang.Ticket_number') }}:
                                    </div>
                                    <div class="contant">
                                        <el-input
                                            disabled
                                            v-model="dataRight.ticket_num"
                                        ></el-input>
                                    </div>
                                </div>
                                <div class="dialogBoxItemRow">
                                    <div class="title">
                                        {{ $t('ShelfManagementLang.current_shelf_num') }}:
                                    </div>
                                    <div class="contant">
                                        <el-input
                                            disabled
                                            v-model="dataRight.shelves_number"
                                        ></el-input>
                                    </div>
                                </div>
                            </div>
                            <div class="dialogBoxItem">
                                <div class="dialogBoxItemRow">
                                    <div class="title">
                                        {{ $t('ShelfManagementLang.consignee_name') }}:
                                    </div>
                                    <div class="contant">
                                        <el-input
                                            disabled
                                            v-model="dataRight.pickup_name"
                                        ></el-input>
                                    </div>
                                </div>
                                <div class="dialogBoxItemRow">
                                    <div class="title">
                                        {{ $t('ShelfManagementLang.consignee_number') }}:
                                    </div>
                                    <div class="contant">
                                        <el-input
                                            disabled
                                            v-model="dataRight.pickup_tel"
                                        ></el-input>
                                    </div>
                                </div>
                            </div>
                            <div class="dialogBoxItem">
                                <div class="dialogBoxItemRow">
                                    <div class="title">
                                        {{ $t('ShelfManagementLang.destination') }}:
                                    </div>
                                    <div class="contant">
                                        <el-input
                                            disabled
                                            v-model="dataRight.target_local_name"
                                        ></el-input>
                                    </div>
                                </div>
                                <div class="dialogBoxItemRow">
                                    <div class="title">
                                        {{ $t('ShelfManagementLang.shipping_fee') }}:
                                    </div>
                                    <div class="contant">
                                        <el-input
                                            disabled
                                            v-model="dataRight.freight_cost"
                                        ></el-input>
                                    </div>
                                </div>
                                <div class="dialogBoxItemRow">
                                    <div class="title">
                                        {{ $t('ShelfManagementLang.payment_status') }}:
                                    </div>
                                    <div class="contant">
                                        <el-input
                                            disabled
                                            v-model="dataRight.pay_status_name"
                                        ></el-input>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        // 接收绑定参数
        midHight: [Number, String]
    },
    data() {
        return {
            Visible: false,
            isListed:true,//是否为货物上架
            data: {
                shelves_id: '',
                express_sn: '',
            },
            dataRight: {
                express_sn: '',
                package_sn: '',
                ticket_num: '',
                shelves_number: '',
                pickup_name: '',
                pickup_tel: '',
                target_local_name: '',
                freight_cost: '',
                pay_status_name: '',
            },
            options_shelf: [],
            confirmTrue: true, //确定按钮保护
        };
    },
    created() {},
    mounted() {},
    deactivated() {},
    watch: {},
    methods: {
       
        init(data) {
            this.Visible = true;
            this.isListed=data
            this.getOptions()
        },
        //获取下拉单数据
        getOptions(){
            this.$get("getShelves",{limit:-1}).then((res) => {
                this.options_shelf = res.data;
            });
        },
        search(){
            let type = true;
            if(!this.data.express_sn){
                this.$refs.express_sn.$el.childNodes[1].style.border='1px solid red'
                type=false
            }
            // 是否有空值必选项标识
            if (type && this.confirmTrue) {
                this.confirmTrue = false;
                window.setTimeout(() => {
                    this.confirmTrue = true;
                }, 1000);
                this.$get("getShelvesPackageInfo",{keyword:this.data.express_sn,status:this.isListed?'':11}).then((res) => {
                    this.dataRight = res.data;
                    this.confirmTrue = true;
                });
            }
        },
        // 提交修改
        confirm() {
            let type = true;
            if (this.isListed&&!this.data.shelves_id&&this.data.shelves_id!==0) {
                this.$refs.shelves_id.$el.childNodes[1].childNodes[1].style.border =
                "1px solid red";
                type = false;
            }
            // 是否有空值必选项标识
            if (type && this.confirmTrue) {
                this.confirmTrue = false;
                window.setTimeout(() => {
                    this.confirmTrue = true;
                }, 1000);
                let params = new FormData();
                let src="unshelvePackage"
                if(this.isListed){
                    params.append('shelves_id', this.data.shelves_id);
                    src="shelvesPackage"
                }
                params.append('package_id', this.dataRight.package_id);
                this.$postForm(src, params).then((res) => {
                    this.confirmTrue = true;
                    if (res.success) {
                        this.$message.success(res.msg);
                        this.$emit('success');
                        this.cancel();
                    }
                });
            }
        },
        //取消修改
        cancel() {
            this.data= {
                shelves_id: '',
                express_sn: '',
            },
            this.dataRight= {
                express_sn: '',
                package_sn: '',
                ticket_num: '',
                shelves_number: '',
                pickup_name: '',
                pickup_tel: '',
                target_local_name: '',
                freight_cost: '',
                pay_status_name: '',
            },
            this.Visible = false;
            let dom = document.getElementsByClassName("el-input__inner");
            for (let i = 0; i < dom.length; i++) {
                dom[i].style.border = "1px solid #E0E3E9";
            }
        },
        //输入框、下拉框失去焦点边框变色
        handleBlur(name, event) {
            if (!this.data[name]&&this.data[name]!==0) {
                event.target.style.border = "1px solid red";
            }
        },
        //输入框、下拉框获取焦点边框变色
        handleFocus(event) {
            event.target.style.border = "1px solid #E0E3E9";
        },
        //下拉框有值后边框变色
        handleChang(data) {
            if (this.data[data].length==0) {
                this.$refs[data].$el.childNodes[1].childNodes[1].style.border = "1px solid red";
            }else{
                this.$refs[data].$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
            }
        },
    }
};
</script>

<style scoped lang="less" >
/deep/ .el-dialog__body{
  height: 100%;
}
.midContant {
    border: 0;
    width: 100%;
    height: 360px;
}
.dialogBox .dialogBoxItem {
    gap: 10px;
    .dialogBoxItemRow{
        width: 100%;
    }
}
/deep/.el-button--small{
    min-width: 100px;
}
</style>